<template>
  <div>
    <!-- 查询框 -->
    <el-input
      placeholder="请输入水果编号或名称"
      v-model="searchText"
      style="width: 200px; margin-bottom: 20px;">
    </el-input>
    <el-button @click="fetchData" icon="el-icon-search" circle></el-button>

  <!-- 新增按钮 -->
  <el-button type="primary" @click="showCreateDialog" icon="el-icon-plus" style="margin-bottom: 10px;">添加</el-button>
    <!-- 列表展示 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="cid" label="水果编号" width="180"></el-table-column>
      <el-table-column prop="cname" label="水果名称" width="180"></el-table-column>
      <el-table-column prop="place" label="水果产地" width="180"></el-table-column>
      <el-table-column prop="season" label="季节" width="180"></el-table-column>
      <el-table-column prop="value" label="营养价值" width="180"></el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="viewDetails(scope.row.cid)" type="text" size="small">详情</el-button>
          <el-button @click="showEditDialog(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="confirmDelete(scope.row.cid)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增和修改的对话框 -->
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
      <el-form :model="orderForm">
        <el-form-item label="水果名称" ref="orderFormRef" label-width="100px">
          <el-select v-model="orderForm.selectedFruit" placeholder="请选择">
        <el-option
          v-for="item in fruitDict"
          :key="item.cid"
          :label="item.cname"
          :value="item"
        >
        </el-option>
      </el-select>
        </el-form-item>
        <el-form-item label="水果产地" label-width="100px">
          <el-input v-model="orderForm.place" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="季节" label-width="100px">
          <el-select v-model="orderForm.season" placeholder="请选择季节">
  <el-option label="春" value="春"></el-option>
  <el-option label="夏" value="夏"></el-option>
  <el-option label="秋" value="秋"></el-option>
  <el-option label="冬" value="冬"></el-option>
</el-select>
        </el-form-item>
        <el-form-item label="营养价值" label-width="100px">
          <el-input v-model="orderForm.value" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveFruit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {listFruit,delFruit,addOrEditFruit,getFruitDict} from "@/api/fruit"
export default {

  data() {
    return {
      tableData: [], // 表格数据
      searchText: '', // 查询框内容
      dialogVisible: false, // 对话框显示状态
      dialogTitle: '', // 对话框标题
      orderForm: { // 订单表单
        cid: '',
        cname: '',
        place: '',
        season: '',
        value: '',
        selectedFruit: null,
      },
      fruitDict:[]
    };
  },
created() {
    this.fetchData();
    this.getFruitDictData();
  },
  methods: {
    // 获取数据
    fetchData() {
     listFruit(this.queryParams).then(response => {
              this.tableData = response.data;
            });
    },
    viewDetails(cid) {
      this.$router.push({ path: `/fruit/detail/${cid}` });
    },
    getFruitDictData(){
      getFruitDict().then(response => {
 
        this.fruitDict = response.data;

      });
    },
    // 显示新增对话框
    showCreateDialog() {
      this.dialogTitle = '新增订单';
      this.orderForm = { cid: '', cname: '', place: '' ,season:'',value:''};
      this.dialogVisible = true;
    },
    // 显示修改对话框
    showEditDialog(order) {
      this.dialogTitle = '修改订单';
      this.orderForm = { ...order };
      this.dialogVisible = true;
    },
    // 保存商品（新增或修改）
  saveFruit() {
      this.orderForm.cid = this.orderForm.selectedFruit.cid;
      this.orderForm.cname = this.orderForm.selectedFruit.cname;
    if (this.orderForm.aid) {
      // 调用接口修改商品
      addOrEditFruit(this.orderForm).then(response => {
        
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.dialogVisible = false;
      this.fetchData();
      });
    } else {  
      // 调用接口新增商品
      addOrEditFruit(this.orderForm).then(response => {
        this.$message({
          message: '新增成功',
          type: 'success'
        });
        this.dialogVisible = false;
        this.fetchData();
      });
    }
    
  },
     confirmDelete(cid) {
            this.$confirm('确定要删除这项吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 调用接口删除产品
              this.deleteFruit(cid);
            }).catch(() => {

            });
          },
          // 删除商品
          deleteFruit(cid) {
            delFruit(cid).then(() => {
              this.fetchData();
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }).catch(error => {
              console.error('删除失败', error);
              this.$message.error('删除失败');
            });
          },

  }
};

</script>
